<template>
      <!-- 黑洞背景 -->
      <div id="content">
            <div>
                  <div style="--i: 1"></div>
                  <div style="--i: 2"></div>
                  <div style="--i: 3"></div>
                  <div style="--i: 4"></div>
                  <div style="--i: 5"></div>
                  <div style="--i: 6"></div>
                  <div style="--i: 7"></div>
                  <div style="--i: 8"></div>
                  <div style="--i: 9"></div>
                  <div style="--i: 10"></div>
                  <div style="--i: 11"></div>
                  <div style="--i: 12"></div>
                  <div style="--i: 13"></div>
                  <div style="--i: 14"></div>
                  <div style="--i: 15"></div>
                  <div style="--i: 16"></div>
                  <div style="--i: 17"></div>
                  <div style="--i: 18"></div>
                  <div style="--i: 19"></div>
                  <div style="--i: 20"></div>
            </div>
            <div>
                  <div style="--i: 1"></div>
                  <div style="--i: 2"></div>
                  <div style="--i: 3"></div>
                  <div style="--i: 4"></div>
                  <div style="--i: 5"></div>
                  <div style="--i: 6"></div>
                  <div style="--i: 7"></div>
                  <div style="--i: 8"></div>
                  <div style="--i: 9"></div>
                  <div style="--i: 10"></div>
                  <div style="--i: 11"></div>
                  <div style="--i: 12"></div>
                  <div style="--i: 13"></div>
                  <div style="--i: 14"></div>
                  <div style="--i: 15"></div>
                  <div style="--i: 16"></div>
                  <div style="--i: 17"></div>
                  <div style="--i: 18"></div>
                  <div style="--i: 19"></div>
                  <div style="--i: 20"></div>
            </div>
      </div>
</template>

<script>
export default {
      name: "Blob",
      props: [],
      data() {
            return {};
      },
      methods: {},
};
</script>

<style scoped>
html,
body,
#content {
      width: 100%;
      height: 100%;
      margin: 0;
}
body {
      --un: 1vh;
      background: #000;
      overflow: hidden;
}
@media only screen and (min-height: 100vw) {
      body {
            --un: 1vw;
      }
}
#content {
      --q: 20;
      position: fixed;
      -webkit-perspective: calc(var(--un) * 5);
      perspective: calc(var(--un) * 5);
}
#content::after {
      content: "";
      position: absolute;
      width: calc(var(--un) * 2);
      height: calc(var(--un) * 2);
      top: calc(50% - var(--un));
      left: calc(50% - var(--un));
      border-radius: 50%;
      box-shadow: 0 0 calc(var(--un) * 4) calc(var(--un) * 4) #000;
      background: #000;
}
#content > div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-style: preserve-3d;
      transform: rotateX(90deg) rotateY(0) translateY(calc(var(--un) * -300));
      animation: tunnel 9s linear infinite;
}
#content > div:last-child {
      animation-duration: 5s;
}
#content > div > div {
      position: absolute;
      width: calc(var(--un) * 400 / var(--q));
      height: calc(var(--un) * 400);
      background-size: calc(var(--un) * 400) calc(var(--un) * 100);
      background-position: calc(var(--un) * -400 * (var(--i) - 1) / var(--q));
      background-image: url();
      transform-origin: 0;
      transform: rotateY(calc(360deg * (var(--i) - 1) / var(--q)))
            translate3d(-50%, 0, calc(var(--un) * 63.25));
}
#content > div:last-child > div {
      opacity: 0.625;
}
@keyframes tunnel {
      to {
            transform: rotateX(90deg) rotateY(360deg)
                  translateY(calc(var(--un) * -200));
      }
}
</style>